<template>
  <div class="container">
    <div class="word">
      <el-form-item
        :label="definer.colorLabel"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <ColorPicker @changeColor="changeTextColor"></ColorPicker>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        :label="definer.fontSizeLabel"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-select
        class="m-2"
        v-model="modelItem.style.textFontSize"
        placeholder="Select"
        @change="changetextFontSize"
      >
        <el-scrollbar height="25vh">
          <el-option
            v-for="item in fontSizeList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-scrollbar>
      </el-select>
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        :label="definer.fontWeightLabel"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-select
        v-model="modelItem.style.titleFontWeight"
        @change="changeWeight"
        class="m-2"
        placeholder="500"
      >
        <el-scrollbar height="25vh">
          <el-option
            v-for="item in fontWeightList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-scrollbar>
      </el-select>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, withDefaults, defineProps } from 'vue'
import Common from '@/options/Common.vue'
import ColorPicker from '@/components/ColorPicker/ColorPicker.vue'
import { fontSizeList } from '@/hooks/useFontSizeList'
import { pxTonumber } from '@/util/common'
import { useResumeJsonStore } from '@/store/resume'
import { useSelectMaterialStore, cptKeyId } from '@/store/resume.ts'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
let userResumeStore = useResumeJsonStore()
const useSelectMaterial = useSelectMaterialStore()
const fontWeightList = reactive<Array<number>>([
  100, 200, 300, 400, 500, 600, 700, 800, 900,
])
const modelItem = selectModelItem()
interface IPorps {
  colorLabel?: string
  fontSizeLabel?: string
  fontWeightLabel?: string
}
const definer = withDefaults(defineProps<IPorps>(), {
  colorLabel: '标题字体颜色:',
  fontSizeLabel: '标题字体大小:',
  fontWeightLabel: '标题字体粗细:',
})
const changeTextColor = (value: string) => {
  modelItem.style.titleColor = value
}
const changetextFontSize = (value: string) => {
  modelItem.style.titleFontSize = value
}
const changeWeight = (value: string) => {
  modelItem.style.titleFontWeight = value
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 10px 0 10px;
  display: flex;

  .word {
    width: 40%;
  }

  .input {
    width: 60%;
  }

  .active {
    color: aquamarine;
  }
}
</style>
